<template>
    <div class="flex items-center space-x-2 text-sm text-gray-600">
      <span>首页</span>
      <span>&gt;</span>
      <span>{{ currentPage }}</span>
    </div>
  </template>
  
  <script setup>
  import { defineProps } from 'vue';
  
  const props = defineProps({
    homeRoute: {
      type: String,
      default: '/'
    },
    currentPage: {
      type: String,
      required: true
    }
  });
  </script>
  
  <style scoped>
  .flex {
    display: flex;
  }
  .items-center {
    align-items: center;
  }
  .space-x-2 > * + * {
    margin-left: 0.5rem;
  }
  .text-sm {
    font-size: 0.875rem;
  }
  .text-gray-600 {
    color: #4b5563;
  }
  .hover:text-blue-600:hover {
    color: #2563eb;
  }
  .transition-colors {
    transition-property: color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }
  </style> 